{include file="common/header"}
<body>
<div class="x-body">
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>角色名称
            </label>
            <div class="layui-input-inline">
                <input type="text" name="role_name" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>权限设置</label>
            <div class="layui-input-inline" style="width: 90%">
                <div class="layui-form-item role-list-form">
                    {foreach $menu as $vo}
                    <dl class="role-list-form-top">
                        <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth" data-pid="{$vo.parent_id}" value="{$vo.id}" lay-skin="primary" title="{$vo.title}"></dt>
                        {if $vo._child}
                        <dd>
                            {foreach $vo._child as $vi}
                            <dl>
                                <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth" data-pid="{$vi.parent_id}" value="{$vi.id}" lay-skin="primary" title="{$vi.title}"></dt>
                                {if $vi._child}
                                <dd>
                                    {foreach $vi._child as $v}
                                    <dl>
                                        <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth" data-pid="{$v.parent_id}" value="{$v.id}" lay-skin="primary" title="{$v.title}"></dt>
                                        {if $v._child}
                                        <dd>
                                            {foreach $v._child as $val}
                                            <dl>
                                                <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth" data-pid="{$val.parent_id}" value="{$val.id}" lay-skin="primary" title="{$val.title}"></dt>
                                            </dl>
                                            {/foreach}
                                        </dd>
                                        {/if}
                                    </dl>
                                    {/foreach}
                                </dd>
                                {/if}
                            </dl>
                            {/foreach}
                        </dd>
                        {/if}
                    </dl>
                    {/foreach}
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label"></label>
            <button  class="layui-btn" lay-filter="add" lay-submit="add">确定添加</button>
        </div>

    </form>
</div>
<script>
    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer;

        //监听提交
        form.on('checkbox(roleAuth)', function(data) {
            var child = $(data.elem).parent('dt').siblings('dd').find('input');
            /* 自动选中父节点 */
            var check_parent = function (id) {
                var self = $('.role-list-form input[value="'+id+'"]');
                var pid = self.attr('data-pid') || '';
                self.prop('checked', true);
                if (pid == '') {
                    return false;
                }
                check_parent(pid);
            };
            /* 自动选中子节点 */
            child.each(function(index, item) {
                item.checked = data.elem.checked;
            });
            check_parent($(data.elem).attr('data-pid'));
            form.render('checkbox');
        });

        form.on('submit(add)', function(data){
            var load = layer.load(1)
            $.post('{:url("addRole")}',data.field,function (res) {
                if (res.success){
                    layer.msg(res.msg,{icon:1},function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.location.reload();
                    })
                } else{
                    layer.close(load);
                    layer.msg(res.msg,{icon:2})
                }
            });
            return false;
        });


    });
</script>
</body>

</html>